* {
  margin: 0;
  padding: 0;
  /* 内外边距清除 */
  box-sizing: border-box;
  /*
   * 也就是说，如果你将一个元素的 width 设为 100px，
   * 那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。
   * 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。
   * 大多数情况下，这使得我们更容易地设定一个元素的宽高。
  */
  font-family: Arial, Helvetica, sans-serif; /*设置字体*/
}
img {
  object-fit: cover;
  /* 全部的图片都根据宽高进行裁剪 */
}

#app {
  width: 100vw;
  height: 100vh;
  /* 铺满全屏（整个视口） */
  background-color: #333333;
  --top-: 13vh;
}
#app #bground {
  z-index: 1;
}
#app .cover,
#app .bg,
#app #body {
  width: 100%;
  height: 100%;
  /* 铺满 */
  position: fixed;
  /* 固定定位 */
  top: 0;
  left: 0;
  /* 全部对齐左上角 */
}
#app .cover {
  background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
  /* 设置图片还没有加载完成时的背景 */
  z-index: 2;
}
#app .bg {
  transition: opacity 1s, transform 0.25s, filter 0.25s;
  /* 过渡 */
  z-index: 1;
  opacity: 0;
  /* 设置图片默认透明 */
}
#app.focus .bg {
  /*当聚焦时的样式*/
  filter: blur(10px);
  /* 模糊 */
  transform: scale(1.1);
  /* 放大 */
}

#app #body {
  z-index: 3;
}
#body .timer {
  cursor: pointer;
  transition: top 0.3s, opacity 0.3s;
  position: absolute;
  top: var(--top-);
  left: 50vw;
  transform: translateX(-50%);
  /* 横向居中 */
  font-size: 42px;
  font-weight: 300;
  color: azure;
  text-shadow: 0 0 20px rgb(0 0 0 / 35%);
  /* 加个阴影 */
  opacity: 0;
  /*默认透明当js获取到时间时输入并显示*/
}
.timer span {
  animation-duration: 1s;
  animation-name: Twinkle;
  animation-iteration-count: infinite;
  /* 加个闪烁的动画 */
}
@keyframes Twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
#body .searchBox {
  position: fixed;
  top: calc(var(--top-) + 70px);
  left: 50vw;
  transform: translateX(-50%);
  transition: top 0.3s;
  /* 居中 */
}
#body #unFocusCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
}
.searchBox > .search {
  width: 230px;
  max-width: 90vw;
  height: 43px;
  border-radius: 30px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  /* 针对部分浏览器的兼容 */
  overflow: hidden;
  /* 超出裁剪 */
  transition: color 0.25s, background-color 0.25s, box-shadow 0.25s, left 0.25s,
    opacity 0.25s, top 0.25s, width 0.25s;
  /* 过渡 */
}

/* 聚焦或者获得悬停时的样式 */
.searchBox > .search:hover,
#app.focus .search {
  color: #000;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
  width: 530px;
}
.searchBox > .search:hover input[type="text"]::-webkit-input-placeholder {
  color: #333333ac;
  /* 默认文本的样式 */
}
.searchBox input[type="text"] {
  border: none;
  outline: none;
  /* 去掉默认样式 */
  padding: 0 20px;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.searchBox input[type="text"]:hover {
  color: #333333ac;
  /* 悬停时内容文本颜色 */
}
.searchBox input[type="text"]::-webkit-input-placeholder {
  color: #fff;
  transition: 0.3s;
}
#app.focus .searchBox input[type="text"] {
  padding: 0 43px;
  /* 聚焦时加个内边距给两边的图标余出位置 */
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
}
#app.focus .searchBox input[type="text"]::-webkit-input-placeholder {
  color: transparent;
  /* 聚焦隐藏掉默认文本的颜色既透明 */
}

.searchBox .search-icon {
  position: absolute;
  left: 0;
  top: 0;
}

/* 媒体查询 */
@media screen and (max-width: 600px) {
  /* 单独为手机或非电脑端做一下兼容 */
  #app.focus {
    --top-: 5vh !important;
  }
}

/* 按钮的样式 */
.search ~ .searchInputBtn {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 纵向居中 */
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.3s, opacity 0.25s;
}
.search ~ .searchInputBtn:hover {
  background-color: rgb(255, 255, 255);
}
.search ~ .searchInputBtn span.iconfont {
  color: #6f6f6f;
}
#app.hover .search {
  color: #000;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
  width: 530px;
}
#app.hover .search input[type="text"]::-webkit-input-placeholder {
  color: #333333ac;
}
#SearchEngBtn {
  left: 5px;
}
#SearchBtn {
  right: 5px;
}

/* 搜索联想的样式 */
#body > .bhead .searchSuggestionContainer {
  z-index: 40;
  position: absolute;
  /* 绝对定位 */
  top: calc(var(--top-) + 120px);
  left: 50%;
  transform: translateX(-50%);
  /* 居中 */
  width: 530px;
  max-width: 90%;
  height: auto;
  overflow-y: hidden;
  /* 溢出裁剪 */
  border-radius: 15px;
  transition: height 0.25s, opacity 0.25s, top 0.3s;
  -webkit-backdrop-filter: blur(30px) saturate(1.25);
  backdrop-filter: blur(30px) saturate(1.25);
}
.searchSuggestionContainer ul > li {
  list-style: none;
  font-size: 12px;
  overflow: hidden;
  height: 30px;
  padding-right: 10px;
  text-indent: 20px;
  line-height: 30px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  transition: 0.25s cubic-bezier(0.65, 0.05, 0.1, 1);
}
.searchSuggestionContainer ul > li span {
  font-size: 12px;
  margin-right: 5px;
}
.searchSuggestionContainer ul > li:hover {
  /* 悬停加一下缩进给用户一个反馈 */
  text-indent: 30px;
  background-color: rgba(255, 255, 255, 0.2);
}
